<!DOCTYPE html>
<!-- 网站主语言 -->
<html lang="zh-cn">
{% load static %}
<head>
    <!-- 网站采用的字符编码 -->
    <meta charset="utf-8">
    <!-- 网站标题 -->
    <title>首页</title>
    <!-- 引入bootstrap的css文件 -->
    <link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}">
    <!-- 引入monikai.css -->
    <link rel="stylesheet" href="{% static 'md_css/monokai.css' %}">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    <!--导入css-->
    <link rel="stylesheet" href="{% static 'common/common.css' %}">
    <link rel="stylesheet" href="{% static 'common/jquery.pagination.css' %}">
    <!-- 引入vuejs -->
    <script type="text/javascript" src="{% static 'js/vue-2.5.16.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/axios-0.18.0.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/jquery-1.12.4.min.js' %}"></script>
</head>

<body>
<div id="app">
<!-- 定义导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">

    <div class="container">
        <!-- 导航栏商标 -->
        <a class="navbar-brand" href="{% url 'home:index' %}">
            <img src="{% static 'img/SHF.PNG' %}" alt="logo" style="width:40px;">
        </a>
        <div>
            <a class="navbar-brand" href="{% url 'home:index' %}">博客Blog</a>
        </div>
        <!-- 分类 -->
        <div class="collapse navbar-collapse">
           <ul class="nav navbar-nav navbar-left">
                    {% for cat in categories %}
                        {% if cat.id == category.id %}
                            <li class="nav-item active">
                                <a class="nav-link mr-2" href="/?cat_id={{ cat.id }}">{{ cat.title }}</a>
                            </li>
                        {% else %}
                             <li class="nav-item">
                                <a class="nav-link mr-2" href="/?cat_id={{ cat.id }}">{{ cat.title }}</a>
                            </li>
                        {% endif %}
                    {% endfor %}
                </ul>
            <ul class="nav navbar-nav navbar-right" style="position: relative;right: -25rem;">
                <!-- 如果用户已经登录，则显示用户名下拉框 -->
                <li class="nav-item dropdown" v-if="is_login">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" @click="show_menu_click">[[username]]</a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown" style="display: block" v-show="show_menu">
                        <a class="dropdown-item" href="{% url 'users:writeblog' %}">写文章</a>
                        <a class="dropdown-item" href='{% url 'users:center' %}'>个人信息</a>
                        <a class="dropdown-item" href='{% url 'users:resetpassword' %}'>重置密码</a>
                        <a class="dropdown-item" href='{% url 'users:logout' %}'>退出登录</a>
                    </div>
                </li>
                <!-- 如果用户未登录，则显示登录按钮 -->
                <li class="nav-item" v-else>
                    <a class="nav-link"  href="{% url 'users:login' %}">登录</a>
                </li>
            </ul>
        </div>
    </div>
</nav>
<!-- content -->
<div class="container">
    <!-- 列表循环 -->
    {% for article in page_articles %}
    <div class="row mt-2">
            <!-- 文章内容 -->
            <!-- 标题图 -->
            <div class="col-3">
                <img class="img-responsive" src="{{ article.avatar.url }}" alt="avatar" style="max-width:100%;max-height: 155px; border-radius: 20px">
            </div>
            <div class="col">
                <!-- 栏目 -->
                <a  role="button" href="#" class="btn btn-sm mb-2 btn-warning">{{ article.category.title }}</a>
            <!-- 标签 -->
                <span>
                        <a href="#" class="badge badge-secondary">{{ article.tags }}</a>
                </span>
                <!-- 标题 -->
                <h4>
                    <b><a href="{% url 'home:detail' %}?id={{ article.id }}" style="color: black;">{{ article.title }}</a></b>
                </h4>
                <!-- 摘要 -->
                <div>
                    <p style="color: gray;">
                       {{ article.sumary }}
                    </p>
                </div>
                <!-- 注脚 -->
                <p>
                    <!-- 查看、评论、时间 -->
                    <span><i class="fas fa-eye" style="color: lightskyblue;"></i>{{ article.total_views }}&nbsp;&nbsp;&nbsp;</span>
                    <span><i class="fas fa-comments" style="color: yellowgreen;"></i>{{ article.comments_count }}&nbsp;&nbsp;&nbsp;</span>
                    <span><i class="fas fa-clock" style="color: pink;"></i>{{ article.created | date }}</span>
                </p>
            </div>
            <hr style="width: 100%;"/>
    </div>
    {% endfor %}
    <!-- 页码导航 -->
    <div class="pagenation" style="text-align: center">
        <div id="pagination" class="page"></div>
    </div>
</div>

<!-- Footer -->
<footer class="py-3 bg-dark" id="footer">
    <div class="container">
        <h5 class="m-0 text-center text-white">Copyright @ shuhongfan</h5>
    </div>
</footer>
</div>

<!-- 引入js -->
<script type="text/javascript" src="{% static 'js/host.js' %}"></script>
<script type="text/javascript" src="{% static 'js/common.js' %}"></script>
<script type="text/javascript" src="{% static 'js/index.js' %}"></script>
<script type="text/javascript" src="{% static 'js/jquery.pagination.min.js' %}"></script>
<script type="text/javascript">
    $(function () {
        $('#pagination').pagination({
            currentPage: {{ page_num }},
            totalPage: {{total_page}},
            callback:function (current) {
                location.href = '/?cat_id={{ category.id }}&page_size={{ page_size }}&page_num='+current;
            }
        })
    });
</script>
</body>
</html>